<style lang="sass" scoped>
    .common_block{
        margin-bottom:50px;
        .item_pro{
            img{
                width:80px;
                height:70px;
                border:solid 1px #eee;
                margin-right:10px;
            }
        }
    }
    .con_menu_top{
        .tabled{
            width:100%;
            margin:0!important;
            padding:0!important;
        }
        .button_list{
            width:100%;
            overflow:hidden;
        }
    }
    .con_main_content{
        width:100%;
        overflow-x:auto;
    }
    
</style>

<template>
    <div class="container-fluid">
        <div class="row comm_conent_padding">
            <div class="comm_content_top mb20">
                <h1 class="bigsize yahei">订单管理</h1>
                <nav-bar><li slot="nav_two">交易管理</li></nav-bar>
            </div>
            <div class="common_block">
                <div class="head head-default">
                    <i class="largeiconfont"></i>
                    <span>订单列表</span>
                </div>
                <div class="col-md-12 mt20 mb20">
                    <div class="search">
                        <input type="text" class="form-control mb10 w-200 inline_block" id="" placeholder="输入产品名称进行查询" >
                        <button class="btn btn-default br0 inline_block">搜索</button>
                    </div>
                </div>
                <div class="checktable clear">
                    <div class="con_menu_top mb15 button_list row">
                        <div class="col-sm-4">
                            <button v-if="!isGoodsListShow" class="btn btn-info br0" v-link="{name:'goods_add_upda',params:{goodsId:'add'}}">新增商品</button>
                            <button v-on:click="getRecycleBinList(1)" class="btn btn-default inline_block br0 ml30">回收商品列表</button>
                            <button v-if="isGoodsListShow" v-on:click="getGoodsList(1)" class="btn btn-primary inline_block br0 ml30">返回</button>
                        </div>
                        <div class="col-sm-8 tr">
                            <pagelist :page-size.sync="search.pageSize" :callback="getGoodsList"></pagelist>
                        </div>
                    </div>
                    <div class="con_menu_top con_main_content table-responsive">
                        <table class="table table-bordered table_color">
                            <tr class="tr_default">
                                <th>商品名称</th>
                                <th>商品ID</th>
                                <th>品牌</th>
                                <th>类别</th>
                                <th>库存量</th>
                                <th>商品价格</th>
                                <th>商品简介</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="item in datas" :class="{'active':item.g_shelves==1}">
                                <td class="item_pro w-400">
                                    <img src="{{item.g_image|imgBaseUrl}}">
                                    <span>{{item.g_name}}</span>
                                </td>
                                <td class="center">{{item.g_id}}</td>
                                <td class="center">{{item.b_name}}</td>
                                <td class="center">{{item.t_name}}</td>
                                <td class="center">{{item.g_stock}}</td>
                                <td class="center">{{item.g_price}}</td>
                                <td class="center">{{item.g_intro}}</td>
                                <td class="center">
                                    <button v-if="!isGoodsListShow" v-link="{name:'goods_add_upda',params:{goodsId:item.g_id}}" class="btn btn-primary btn-sm br0">编辑</button>
                                    <button v-on:click="setShelves(item)" v-if="item.g_shelves==1&&!isGoodsListShow" class="btn btn-info btn-sm br0">上架</button>
                                    <button v-on:click="setShelves(item)" v-if="item.g_shelves==0&&!isGoodsListShow" class="btn btn-danger btn-sm br0">下架</button>
                                    <button v-on:click="recycleBin(item)" class="btn btn-default btn-sm br0">{{item.g_delete==0?'放入回收站':'恢复商品'}}</button>
                                </td>
                            </tr>
                        </table>
                    </div> 
                </div>
                <!-- 分页 -->
                <div class="page_box tr mr20">
                    <page :now-page="search.pageNo" :total-count="search.totalCount" :page-size="search.pageSize"></page>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import navBar from 'commonvue/navBar' 
    import pagelist from 'commonvue/pageList'
    import searc from 'commonvue/search'
    import page from 'commonvue/page'
    import pagepop from 'commonvue/page_pop'
    import selectmany from 'commonvue/select_many'
    import selectTimeCommon from 'commonvue/select_time_common'

    export default {
        components: {
            navBar,
            searc,
            page,
            pagelist,
            pagepop,
            selectmany,
            selectTimeCommon
        },
        data () {
            return {
                search:{
                    pageNo:1,
                    pageSize:config.pageSize,
                    startime:'',
                    endtime:'',
                    totalCount:0,
                },
                datas:[],
                isGoodsListShow:false,
            }
        },
        route: {
            data ({to: {query, params}}) {
                if(query.pageNo) {
                    this.search.pageNo = parseInt(query.pageNo) || 1
                } else {
                    this.search.pageNo = 1
                }
                

            }
        },
        beforeCompile(){
            this.getGoodsList();
        },
        methods: {
            //获得商品列表信息
            getGoodsList(pageNo){
                if(pageNo) this.search.pageNo=pageNo;
                common.ajax({
                    url:config.baseApi+'cms/api/goods/getGoodsList',
                    data:{
                        pageNo:this.search.pageNo,
                        pageSize:this.search.pageSize
                    },
                }).then(((data)=>{
                    this.datas=data.data.datas;
                    this.search.pageNo=data.data.pageNo;
                    this.search.totalCount=data.data.totalCount;
                    this.isGoodsListShow=false;
                }))
            },
            // 上下架
            setShelves(item){
                let text=item.g_shelves==0?'下架':'上架';
                popup.confirm({title:`确定${text}吗`,yes:(()=>{
                    common.ajax({
                        url:config.baseApi+'cms/api/goods/setShelves',
                        data:{
                            goodsId:item.g_id,
                            shelves:item.g_shelves,
                        },
                    }).then(((data)=>{
                        this.getGoodsList();
                        popup.miss({title:'操作成功!'})
                    }));
                })});
            },
            // 放入回收站
            recycleBin(item){
                var text=item.g_delete==0?'放入回收站中':'恢复商品';
                popup.confirm({title:`确定${text}吗?`,yes:(()=>{
                    common.ajax({
                        url:config.baseApi+'cms/api/goods/setRecycleBin',
                        data:{
                            gdelete:item.g_delete,
                            goodsId:item.g_id,
                        },
                    }).then(((data)=>{
                        if(!this.isGoodsListShow){
                            this.getGoodsList();     
                        }else{
                            this.getRecycleBinList();     
                        };
                        popup.miss({title:'操作成功!'})
                    }));
                })});
            },
            // 获得回收站数据列表
            getRecycleBinList(pageNo){
                if(pageNo) this.search.pageNo=pageNo;
                common.ajax({
                    url:config.baseApi+'cms/api/goods/getRecycleBinList',
                    data:{
                        pageNo:this.search.pageNo,
                        pageSize:this.search.pageSize
                    },
                }).then(((data)=>{
                    this.datas=data.data.datas;
                    this.search.pageNo=data.data.pageNo;
                    this.search.totalCount=data.data.totalCount;
                    this.isGoodsListShow=true;
                }));
            },
        },

    }
</script>